Next.js staatilised ekspordid: ainult kliendipoolsete rakenduste loomine

Next.js on võimas Reacti raamistik, mis võimaldab arendajatel luua jõudsaid, skaleeritavaid ja SEO-sõbralikke veebirakendusi. Kuigi Next.js on tuntud oma serveripoolse renderdamise (SSR) ja staatilise saidi genereerimise (SSG) võimekuse poolest, pakub see ka paindlikkust luua ainult kliendipoolseid rakendusi, kasutades staatilisi eksporte. See lähenemine võimaldab teil kasutada Next.js-i tööriistade ja struktuuri eeliseid, juurutades samal ajal puhtalt kliendipoolse rakenduse. See postitus juhendab teid läbi kõige, mida peate teadma ainult kliendipoolsete rakenduste loomisest Next.js staatiliste eksportidega, käsitledes eeliseid, piiranguid, seadistusprotsessi ja täiustatud tehnikaid.

Mis on Next.js staatilised ekspordid?

Staatilised ekspordid Next.js-is viitavad protsessile, kus teie rakendusest genereeritakse ehitusprotsessi käigus täielikult staatiline versioon. See tähendab, et kõik HTML-, CSS- ja JavaScripti-failid on eelrenderdatud ja valmis otse staatilisest failiserverist (nt Netlify, Vercel, AWS S3 või traditsiooniline veebiserver) serveerimiseks. Erinevalt serveris renderdatud rakendustest pole sissetulevate päringute käsitlemiseks vaja Node.js serverit. Selle asemel tarnitakse kogu rakendus staatiliste varade kogumina.

Ainult kliendipoolse rakenduse sihtimisel genereerib Next.js need staatilised varad eeldusega, et kogu dünaamiline käitumine toimub kliendipoolse JavaScripti abil. See on eriti kasulik üheleheliste rakenduste (SPA) jaoks, mis tuginevad peamiselt kliendipoolsele marsruutimisele, API-kõnedele ja kasutaja interaktsioonidele.

Miks valida staatilised ekspordid kliendipoolsete rakenduste jaoks?

Kliendipoolsete rakenduste loomine Next.js staatiliste eksportidega pakub mitmeid kaalukaid eeliseid:

• Parem jõudlus: Staatilisi varasid saab serveerida otse CDN-ist (sisu edastamise võrk), mis tagab kiiremad laadimisajad ja parema kasutajakogemuse. Serveripoolset töötlemist pole vaja, mis vähendab latentsust ja parandab skaleeritavust.
• Suurem turvalisus: Ilma serveripoolse komponendita on teie rakenduse ründepind oluliselt vähenenud. Potentsiaalseid haavatavusi on vähem, mida ära kasutada, muutes teie rakenduse turvalisemaks.
• Lihtsustatud juurutamine: Staatilise saidi juurutamine on üldiselt palju lihtsam kui serveris renderdatud rakenduse juurutamine. Saate kasutada laia valikut staatilisi majutusteenuse pakkujaid, millest paljud pakuvad tasuta tasemeid või taskukohaseid hinnaplaane.
• Kulutõhus majutus: Staatiline majutus on tavaliselt odavam kui serveripõhine majutus, kuna maksate ainult salvestusruumi ja ribalaiuse eest.
• Parem SEO (teatud kaalutlustega): Kuigi traditsiooniliselt on kliendipoolsetel rakendustel SEO-ga seotud väljakutseid, leevendab Next.js-i staatiline eksport seda, eelrenderdades esialgse HTML-struktuuri. Dünaamiline sisu, mis tugineb tugevalt kliendipoolsele renderdamisele, võib siiski nõuda täiendavaid SEO strateegiaid (nt robotite jaoks eelrenderdamisteenuse kasutamine).
• Arenduskogemus: Next.js pakub suurepärast arenduskogemust selliste funktsioonidega nagu moodulite kuum asendamine, kiire värskendamine ja sisseehitatud marsruutimine, mis muudab keerukate kliendipoolsete rakenduste loomise ja hooldamise lihtsamaks.

Staatiliste eksportide piirangud

Kuigi staatilised ekspordid pakuvad arvukalt eeliseid, on oluline olla teadlik nende piirangutest:

• Serveripoolse renderdamise puudumine: Staatilised ekspordid ei sobi rakendustele, mis nõuavad serveripoolset renderdamist SEO või jõudluse põhjustel. Kogu renderdamine toimub kliendi poolel.
• Piiratud dünaamiline sisu: Rakendused, mis tuginevad tugevalt serveripoolsele andmete hankimisele või dünaamilise sisu genereerimisele, ei pruugi staatiliste eksportide jaoks hästi sobida. Kogu andmete hankimine ja töötlemine peab toimuma kliendi poolel.
• SEO kaalutlused dünaamilise sisu puhul: Nagu eelnevalt mainitud, võib SEO olla väljakutse, kui teie rakenduse sisu genereeritakse suures osas kliendi poolel. Otsingumootorite roomikud ei pruugi olla võimelised JavaScripti käivitama ja sisu korralikult indekseerima.
• Ehitusaeg: Staatilise saidi genereerimine võib võtta kauem aega kui serveris renderdatud rakenduse ehitamine, eriti suurte ja keerukate projektide puhul.

Next.js seadistamine staatiliste eksportide jaoks

Siin on samm-sammuline juhend, kuidas seadistada Next.js staatiliste eksportide jaoks:

1. Looge uus Next.js projekt

Kui teil veel pole Next.js projekti, looge see järgmise käsuga:

            npx create-next-app my-client-app
            

              
                Copy
              
            
          

Valige seadistusprotsessi käigus oma vajadustele kõige paremini vastavad valikud (nt TypeScript, ESLint).

2. Konfigureerige `next.config.js`

Avage oma projekti juurkaustas fail `next.config.js` ja lisage järgmine konfiguratsioon:

            /** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  // Valikuline: muuda lingid `/me` -> `/me/` ja väljasta `/me.html` -> `/me/index.html`
  // vt https://nextjs.org/docs/app/api-reference/next-config#trailing-slash
  // experimental:
  //  {appDir: false}
}

module.exports = nextConfig
            

              
                Copy
              
            
          

`output: 'export'` valik annab Next.js-ile käsu genereerida teie rakendusest staatiline eksport. `trailingSlash: true` seadistamine on üldiselt soovitatav, et tagada ühtlane URL-i struktuur ja vältida võimalikke SEO probleeme.

3. Uuendage `package.json`

Muutke oma `package.json` faili `scripts` jaotist, et lisada ehitusskript staatiliste eksportide jaoks:

            {
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  }
}
            

              
                Copy
              
            
          

See skript ehitab esmalt teie Next.js rakenduse ja seejärel ekspordib selle staatilisse kausta.

4. Rakendage kliendipoolne marsruutimine

Kuna loote kliendipoolset rakendust, peate rakendama kliendipoolse marsruutimise, kasutades `next/router` moodulit või kolmanda osapoole teeki nagu `react-router-dom`. Siin on näide, kasutades `next/router`:

            import { useRouter } from 'next/router';
import Link from 'next/link';

function HomePage() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Avaleht</h1>
      <p>Tere tulemast avalehele!</p>
      <button onClick={handleClick}>Mine lehele 'Teave'</button>

      <Link href="/about">
         <a>Mine lehele 'Teave' (kasutades Linki)</a>
      </Link>
    </div>
  );
}

export default HomePage;
            

              
                Copy
              
            
          

Sujuvate kliendipoolsete üleminekute tagamiseks ärge unustage sisemise navigeerimise jaoks kasutada `next/link` `Link` komponenti.

5. Käsitlege andmete hankimist kliendi poolel

Kliendipoolses rakenduses peab kogu andmete hankimine toimuma kliendi poolel, kasutades tehnikaid nagu `useEffect` või `useState` hooke. Näiteks:

            import { useState, useEffect } from 'react';

function DataPage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP viga! staatus: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <p>Laen...</p>;
  if (error) return <p>Viga: {error.message}</p>;
  if (!data) return <p>Kuvatavaid andmeid pole</p>;

  return (
    <div>
      <h1>Andmete leht</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataPage;
            

              
                Copy
              
            
          

6. Ehitage ja eksportige oma rakendus

Käivitage ehitusskript, et genereerida staatiline eksport:

            npm run build
            

              
                Copy
              
            
          

See loob `out` (või `public`, sõltuvalt Next.js versioonist) kausta, mis sisaldab teie rakenduse staatilisi HTML-, CSS- ja JavaScripti-faile.

7. Juurutage oma staatiline sait

Nüüd saate `out` kausta sisu juurutada staatilisse majutusteenusesse nagu Netlify, Vercel, AWS S3 või GitHub Pages. Enamik pakkujaid pakub protsessi automatiseerimiseks lihtsat lohista-ja-viska juurutamist või käsurea tööriistu.

Täiustatud tehnikad kliendipoolsete Next.js rakenduste jaoks

Siin on mõned täiustatud tehnikad teie kliendipoolsete Next.js rakenduste optimeerimiseks:

1. Koodi tükeldamine ja laisklaadimine

Kasutage dünaamilisi importe (`import()`), et jagada oma kood väiksemateks tükkideks, mida laaditakse nõudmisel. See võib märkimisväärselt parandada esialgseid laadimisaegu, eriti suurte rakenduste puhul.

            import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyPage() {
  return (
    <Suspense fallback={<div>Laen...</div>}>
      <MyComponent />
    </Suspense>
  );
}
            

              
                Copy
              
            
          

2. Piltide optimeerimine

Kasutage piltide optimeerimiseks `next/image` komponenti. See komponent optimeerib pildid automaatselt erinevate seadmete ja ekraanisuuruste jaoks, parandades jõudlust ja kasutajakogemust. See toetab laisklaadimist, tundlikke pilte ja erinevaid pildivorminguid.

            import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/images/my-image.jpg"
      alt="Minu pilt"
      width={500}
      height={300}
    />
  );
}
            

              
                Copy
              
            
          

3. Service Workerid

Rakendage service worker, et võimaldada võrguühenduseta funktsionaalsust ja parandada jõudlust. Service worker on skript, mis töötab taustal ja suudab kinni püüda võrgupäringuid, vahemällu salvestada varasid ja saata tõuketeateid. Teegid nagu `next-pwa` võivad lihtsustada service workeri lisamist teie Next.js rakendusele.

4. Keskkonnamuutujad

Kasutage keskkonnamuutujaid oma rakenduse konfigureerimiseks erinevate keskkondade jaoks (nt arendus, testimine, tootmine). Next.js pakub sisseehitatud tuge keskkonnamuutujatele `.env` faili ja `process.env` objekti kaudu. Olge ettevaatlik, et mitte paljastada tundlikku teavet kliendipoolses koodis. Kasutage keskkonnamuutujaid peamiselt konfiguratsiooniseadete jaoks, mida on ohutu avaldada.

5. Monitooring ja analüütika

Integreerige monitooringu- ja analüütikateenus (nt Google Analytics, Sentry või New Relic), et jälgida jõudlusnäitajaid, tuvastada vigu ja saada ülevaadet kasutajate käitumisest. See aitab teil oma rakendust optimeerida ja aja jooksul kasutajakogemust parandada.

6. SEO optimeerimine kliendipoolsetes rakendustes

Kuigi staatilised ekspordid pakuvad esialgse HTML-struktuuri, kaaluge neid strateegiaid parema SEO saavutamiseks kliendipoolsetes rakendustes:

• Eelrenderdamise teenused: Kasutage teenust nagu prerender.io, et serveerida täielikult renderdatud HTML-i otsingumootorite robotitele.
• Dünaamilised saidikaardid: Genereerige ja uuendage oma saidikaardi XML-i dünaamiliselt vastavalt teie rakenduse sisule.
• Struktureeritud andmed: Rakendage struktureeritud andmete märgistus (Schema.org), et aidata otsingumootoritel teie sisu mõista.
• Meta-sildid: Uuendage dünaamiliselt meta-silte (pealkiri, kirjeldus jne), kasutades teeke nagu `react-helmet`, vastavalt praegusele marsruudile ja sisule.
• Sisu edastamine: Veenduge, et teie sisu laadiks kiiresti ja globaalselt. Kasutage CDN-i. Kasutajal Austraalias peaks olema sama kiire kogemus kui kasutajal USA-s.

Rahvusvahelistamise (i18n) kaalutlused

Globaalsele publikule kliendipoolse rakenduse loomisel on rahvusvahelistamine (i18n) ülioluline. Siin on mõned parimad tavad:

• Tõlkefailid: Hoidke oma tõlkeid iga keele jaoks eraldi failides. Kasutage tõlgete haldamiseks teeki nagu `i18next` või `react-intl`.
• Lokaadi tuvastamine: Rakendage lokaadi tuvastamine vastavalt kasutaja brauseri seadetele või IP-aadressile.
• Marsruutimine: Kasutage URL-i eesliiteid või alamdomeene praeguse keele näitamiseks (nt `/et/`, `/en/`, `et.example.com`, `en.example.com`). Next.js-il on sisseehitatud i18n marsruutimise tugi alates versioonist 10.
• Numbrite ja kuupäevade vormindamine: Kasutage lokaadipõhist numbrite ja kuupäevade vormindamist, et tagada andmete korrektne kuvamine erinevate kultuuride jaoks.
• Paremalt-vasakule (RTL) tugi: Toetage paremalt-vasakule keeli nagu araabia ja heebrea, kasutades CSS-i loogilisi omadusi ja suuna atribuute.
• Valuuta vormindamine: Kuvage valuutasid, kasutades erinevate lokaatide jaoks õigeid sümboleid ja vorminguid. Teegid nagu `Intl.NumberFormat` võivad olla äärmiselt kasulikud.

Õige lähenemise valimine: staatiline eksport vs. serveripoolne renderdamine

Otsustamine, kas kasutada staatilisi eksporte või serveripoolset renderdamist, sõltub teie rakenduse konkreetsetest nõuetest. Kaaluge järgmisi tegureid:

• Sisu tüüp: Kas teie sisu on peamiselt staatiline või dünaamiline? Kui see on enamasti staatiline, on staatilised ekspordid hea valik. Kui see on väga dünaamiline ja nõuab serveripoolset andmete hankimist, võib serveripoolne renderdamine olla sobivam.
• SEO nõuded: Kui oluline on SEO teie rakenduse jaoks? Kui SEO on kriitiline, võib serveripoolne renderdamine olla vajalik, et tagada otsingumootorite roomikute võime teie sisu korralikult indekseerida.
• Jõudlusnõuded: Millised on teie rakenduse jõudlusnõuded? Staatilised ekspordid võivad pakkuda suurepärast jõudlust staatilise sisu jaoks, samas kui serveripoolne renderdamine võib parandada dünaamilise sisu jõudlust, vähendades kliendipoolset töötlemist.
• Keerukus: Kui keeruline on teie rakendus? Staatilisi eksporte on üldiselt lihtsam seadistada ja juurutada, samas kui serveripoolne renderdamine võib teie arendusprotsessile lisada keerukust.
• Eelarve: Milline on teie eelarve majutuse ja infrastruktuuri jaoks? Staatiline majutus on tavaliselt odavam kui serveripõhine majutus.

Reaalse maailma näited

Siin on mõned reaalse maailma näited rakendustest, mis võivad Next.js staatilistest eksportidest kasu saada:

• Maandumislehed: Lihtsad maandumislehed staatilise sisu ja minimaalse interaktiivsusega.
• Dokumentatsiooni saidid: Dokumentatsiooni saidid eelrenderdatud sisu ja kliendipoolse otsingufunktsiooniga.
• Blogid (CMS-iga): Blogid, kus sisu hallatakse peata CMS-i kaudu ja hangitakse kliendi poolel.
• Portfooliod: Isiklikud või professionaalsed portfooliod staatilise teabe ja kliendipoolse marsruutimisega.
• E-kaubanduse tootekataloogid: Väikesed ja keskmise suurusega e-poed, mis saavad tooteandmed eelrenderdada, kus dünaamilised ostukorvi ja kassaprotsessid toimuvad kliendi poolel.

Näide: Rahvusvahelise ettevõtte veebisait

Kujutage ette ettevõtet, millel on kontorid New Yorgis, Londonis ja Tokyos. Nad soovivad veebisaiti, mis oleks saadaval inglise, prantsuse ja jaapani keeles. Next.js staatiline eksport koos peata CMS-i ja i18n teekidega võiks olla ideaalne. CMS säilitaks tõlgitud sisu, Next.js hangiks ja renderdaks selle kliendi poolel ning staatilise saidi saaks kiireks juurdepääsuks globaalselt CDN-is juurutada.

Kokkuvõte

Next.js staatilised ekspordid pakuvad võimsat viisi ainult kliendipoolsete rakenduste loomiseks, kasutades Next.js raamistiku eeliseid. Mõistes eeliseid, piiranguid, seadistusprotsessi ja täiustatud tehnikaid, saate luua kiireid, turvalisi ja globaalselt kättesaadavaid veebikogemusi, mis vastavad teie konkreetsetele nõuetele. Olenemata sellest, kas loote lihtsat maandumislehte või keerulist SPA-d, võivad staatilised ekspordid olla väärtuslik tööriist teie veebiarenduse arsenalis.